<!DOCTYPE html>

<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>FStack-确认订单</title>    
	<link rel="stylesheet" type="text/css" href="./css/style.css">
    <link rel="stylesheet" href="./css/preview.css">
    </head>
	<body style="">
	  <div class="wrapper">
  	  <div class="page-header clearfix">
        <div class="middle-nav">
          <div class="middlenav-wrap clearfix">
            <h1 class="logo fl">
              <a href="/front/goods.html" title="FStack"><img src="./images/logo.png" alt="FStack"></a>
            </h1>
			<div class="desire fl">
              <span id="memberName" style="font-size:16px;">欢迎您,</span>
              <a href="/front/order_list.html" class="ca-lightgrey" rel="nofollow"><span>我的订单</span></a>
              <a href="/front/order_detail.html" class="ca-lightgrey" rel="nofollow"><span>我的购物车</span></a>
            </div>
          </div>
        </div>
      </div>
      <div class="page-wrap">
        <div class="inner-wrap">
<div class="breadcrumb">
  <span>确认购买</span>
</div>
<div class="clearfix order-confirm" id="j-order-confirm">
  <div class="order-info-wrapper j-order-info-wrapper clearfix">
    <div class="fl address">
      <table class="standard-table dishes-table">
        <thead>
          <tr class="bot-border">
            <th class="left" width="240"><div class="th-inner align-left">菜品</div></th>
            <th class="right" colspan="2"><div class="th-inner align-right">价格/数量</div></th>
          </tr>
        </thead>
        <tbody id="buycar">
        </tbody>
      </table>

    </div>
    <div class="dishes">
      <div class="dishes-rap">
        <div class="address-head">
            <a id="address-new" class="address-new"><i class="order-icon i-add-addr"></i>添加新地址</a>
          <h3 class="address-title">
              送餐详情
          </h3>
        </div>

        <form id="orderForm" class="order-form">
          <div id="address-list" class="address-list">
              <div id="address-list-wrap" class="address-list-wrap high-height">
                <div id="address-list-inner" class="address-list-inner">

                </div>
              </div>

          </div>
          <div class="field clearfix leave-message-short">
            <label for="message">给商家留言：</label>
            <input class="show-tags sprite" type="text" name="remarks" id="remarks" placeholder="不要辣，多放盐等口味要求" maxlength="100" value="">
            <input type="text" style="display:none">
          </div>


            <div class="pay-field clearfix">
              <label class="fl" for="pay-method">付款方式：</label>
              <div class="fl pay-option clearfix">
                    <a href="javascript:;" data-method="1" class="fl sprite option  option-unavail j-show-tips selected" >餐到付款</a>
                    <!-- <a href="javascript:;" data-method="2" class="fl sprite option option-margin selected ">在线支付</a> -->
              </div>
            </div>
        </form>

        <!-- <script type="text/template" id="addressDialog">
          <div class="add"><a href="javascript:;" class="add-address">+ 添加新地址</a></div>
          <ul id="member_address">
             
          </ul>
          <div class="btns clearfix">
            <a class="s-btn fr select-address"><span class="s-btn">确认</span></a>
            <span class="error-info fr"></span>
          </div>
        </script> -->
      </div>
        <!-- <div class="pre-order field">
          <span>期望送达时间：</span>
          <a href="javascript:;" id="preorder-time" class="select-input"><span>立即送出</span><i class="icon"></i></a>
          <span class="pre-order-tip"><span class="error-tips"></span></span>
        </div> -->
      <div class="pay-area">
        <div id="order-address-warning" class="order-address-warning" style="display: none"></div>
          <div class="first-order-tip borderradius-5 fr j-first-order-tip">
          </div>
          <a class="s-btn yellow-btn fr" id="confirmOrder"><span class="s-btn">确定下单</span></a>
        <div class="tips ct-black">
            您需支付&nbsp;<span class="price cc-lightred-new">¥<span id="totalPrice">0</span>
            </span>
         <br>

        </div>
      </div>
    </div>
  </div>
</div>

      </div>
    </div>
  </div>
  
  <!-- 添加新地址 start -->
  <div class="dialog dialog-address" style="display: none;">
	<table class="simple-dialog" style="left: 394.5px; top: 190px;">
		<tbody>
			<tr>        
				<td class="middle-center">
					<div class="dialog-main">
						<input type="hidden" id="addressId" />
						<div class="title"><a href="javascript:;" class="close fr"><i class="icon i-cross"></i></a><span>添加新地址</span></div>
						<div class="content">
							<div class="j-add-box add-box clearfix" data-aid="undefined">
								<div class="addr-line clearfix"><label class="addr-line-label"><span class="addr-em">*</span>联系人：</label>   
									<div class="addr-line-content">
										<input type="text" name="name" id="name" value="" placeholder="请输入姓名" class="user-input input-shadow" maxlength="20"> 
										<div><span class="addr-em">*</span>
											<input type="radio" name="sex" value="先生" id="addr-box-gender1" class="gender-input gender1-input">
											<label for="addr-box-gender1">先生</label>
											<input type="radio" name="sex" value="女士" id="addr-box-gender2" class="gender-input gender2-input">
											<label for="addr-box-gender2">女士</label>
										</div>
									</div>
								</div>
								<div class="addr-line clearfix">
									<label class="addr-line-label"><span class="addr-em">*</span>手机号码：</label>
									<div class="addr-line-content">
										<input type="text" name="phone" id="phone" value="" placeholder="请输入11位手机号码" class="mobile-input input-shadow" maxlength="11"> 
									</div>
								</div>
								<div class="addr-line clearfix">
									<div class="addr-address-tip">请输入地址，并在下拉框中选择</div>
									<label class="addr-line-label"><span class="addr-em">*</span>收餐地址：</label>
									<div class="addr-line-content">
										<i class="icon i-user-pos" style="margin-left: 0px;"></i>
										<input type="text" name="address" id="address" value="" placeholder="学校/小区/街道" class="address-input input-shadow" maxlength="50">
										<ul class="address-suggestion j-address-suggestion" style="display:none;"></ul>
									</div>
								</div>
								<div class="addr-line clearfix">
									<label class="addr-line-label">
									<span class="addr-em-hidden">*</span>详细地址：</label>
									<div class="addr-line-content">
										<input type="text" name="detailAddress" id="detailAddress" placeholder="您可以填写门牌号码，宿舍楼等" class="address-detail-input input-shadow" maxlength="50">
									</div>
								</div>
								<div class="j-addr-tip addr-tip"></div>
								<div class="addr-btn-wrap clearfix">
									<a href="javascript:;" class="save borderradius-3">保存</a>
									<a href="javascript:;" class="cancel borderradius-3">取消</a> 
								</div>
							</div>
						</div>
					</div>
				</td>
			</tr>
		</tbody>
	</table>
  </div>
   <!-- 添加新地址 end -->
   
   <!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="../lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="../static/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="../static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
<script type="text/javascript" src="../static/h-ui.admin/js/common.js"></script>
<script type="text/javascript" src="../static/h-ui.admin/js/utils.js"></script>
<script type="text/javascript">
$(function(){
	loadData();
	loadAddres();
	//加载数据
	function loadData(){
		$("#memberName").html($("#memberName").html()+common.currentMember.name);
		
		var params = common.getParams();
		var list =  $.parseJSON(params.buycars?params.buycars:"{}");
		var html='';
		var totalCount=0,totalPrice=0;
		$.each(list, function(){
			var name = this.name;
			var price = this.price;
			var count = this.count;
			
			html+='<tr class="buycar_goods" attrId="'+this.id+'">\
						<td class="left">\
							<div class="td-inner align-left" title="'+this.name+'">\
								<div>'+this.name+'</div>\
								<div class="dish-sku"></div>\
							</div>\
						</td>\
						<td class="right" colspan="2">\
							<div class="td-inner align-right">¥<span class="price">'+this.price+'</span>/<span class="count">'+this.count+'</span></div>\
						</td>\
					</tr>';
			totalCount+=parseInt(count);
			totalPrice = parseFloat(totalPrice+parseFloat(parseInt(count)*parseFloat(price)));
		});
		html+='<tr class="total" data-total="52">\
					<td colspan="3" class="clearfix middle">\
						<div class="td-inner clearfix">\
							<span class="t-total fl">合计</span>\
							<span class="t-number fr">¥'+totalPrice+'</span>\
						</div>\
					</td>\
				</tr>';
		
		$("#buycar").html(html);
		$("#totalPrice").html(totalPrice);
	}
	//加载收货地址
	function loadAddres(){
		var url = "/memberAddress/list?pageNum=-1";
		common.getData(url,function(data){
			var list = data.result.records;
			var html = '';
			for(var i=0;i<list.length;i++){
				var obj = list[i];
				var check = "";
				if(i==0){
					check = "address-checked";
				}
				html+='<div class="j-address-box address-box '+check+'" data-aid="'+obj.id+'" data-flag="1">\
                      <p class="address-line">\
                        <span>\
                            '+obj.name+'\
                            '+obj.sex+'\
                            ：\
                          '+obj.phone+'\
                        </span>\
                        <span class=" fr">\
                          <a class="j-modify-address address-operation cc-lightred-new" attrId="'+obj.id+'" href="javascript:;">修改</a>\
                          <a class="j-delete-address address-operation cc-lightred-new" attrId="'+obj.id+'" href="javascript:;">删除</a>\
                        </span>\
                      </p>\
                      <p class="address-line">'+obj.address+'&nbsp;&nbsp;'+obj.detailAddress+'</p>\
                                            <i class="order-icon i-addr-check"></i>\
                    </div>';
			}
			$("#address-list-inner").html(html);
		});
	}
	//新地址添加
	$("#address-new").click(function(){
		$("#addressId").val("");
		$("#name").val("");
		$("#phone").val("");
		$("#address").val("");
		$("#detailAddress").val("");
		
		$(".dialog-address").css("display","block");
	});
	$(".cancel,.close").click(function(){
		$(".dialog-address").css("display","none");
	});
	//确定下单
	$("#confirmOrder").click(function(){
		var lis = $("#buycar").find(".buycar_goods");
		var totalCount=0,totalPrice=0;
		var list=[],obj={};
		$.each(lis, function(){
			obj={};
			obj["id"]=parseFloat($(this).attr("attrId"));
			obj["count"]=parseInt($(this).find(".count").html());
			obj["price"]=parseInt($(this).find(".price").html());
			
			list.push(obj);
		});
		
		var remarks = $("#remarks").val();
		var memberAddressId = $("#address-list-inner").find(".address-checked").attr("data-aid");
		var url = "/order/create";
		var data={wxId:common.currentMember.wxId,remarks:remarks,memberAddressId:memberAddressId,listDetail:JSON.stringify(list)};
		common.postData(url,data,function(data){
			common.addParams({buycars:"{}"});
			common.alertX(data.msg);
			window.location.href=common.htmlPath+"/front/order_list.html";
		});
	});
	//地址选择
	$(document).on("click",".address-box",function(){  
		$(".address-checked").removeClass("address-checked");
		$(this).addClass("address-checked");
	});
	//新增地址
	$(document).on("click",".save",function(){  
		var name = $("#name").val();
		var sex = $("input[name='sex']:checked").val();
		var phone = $("#phone").val();
		var address = $("#address").val();
		var detailAddress = $("#detailAddress").val();	
		var addressId = $("#addressId").val();
		var url = "/memberAddress/create";
		debugger;
		if(addressId){
			url = "/memberAddress/update";
		}
		var data={id:addressId,name:name,sex:sex,phone:phone,address:address,detailAddress:detailAddress};
		common.postData(url,data,function(data){
			$(".close").trigger("click");
			common.msg(data.msg);
			loadAddres();
		});
	});
	//删除地址信息
	$(document).on("click",".j-delete-address",function(){  
		var id = $(this).attr("attrId");
		var url = "/memberAddress/del";
		var data={id:id};
		common.postData(url,data,function(data){
			common.msg(data.msg);
			loadAddres();
		});
	});
	//修改地址
	$(document).on("click",".j-modify-address",function(){  
		var id = $(this).attr("attrId");
		var url = "/memberAddress/getInfoById?id="+id;
		common.getData(url,function(data){
			$("#addressId").val(data.result.id);
			$("#name").val(data.result.name);
			$("input[name='sex'][value='"+data.result.sex+"']").attr("checked",true); 
			$("#phone").val(data.result.phone);
			$("#address").val(data.result.address);
			$("#detailAddress").val(data.result.detailAddress);
			$(".dialog-address").css("display","block");
		});
	});
	
});
</script>
</body>
</html>